<template>
  <view class="applicationDetails">
    <u-form ref="uForm" :model="form" label-width="240">
      <u-form-item :label="$t('申请单名称')">
        <text>{{ form.title }}</text>
      </u-form-item>
      <u-form-item :label="$t('审批编号')">
        <text>{{ form.id }}</text>
      </u-form-item>
      <u-form-item :label="$t('用印人')">
        <text>{{ form.userName || $t('暂无') }}</text>
      </u-form-item>
      <u-form-item :label="$t('加盖印章')">
        <view
          v-for="(item, index) in form.useCountVos"
          :key="index"
          class="form-item"
          @click="showToast(item)"
        >
          <u-tag :text="item.deviceName" type="success"></u-tag>
          <u-badge :count="item.useCount" :offset="[-5, -18]" show-zero type="error"></u-badge>
        </view>
      </u-form-item>
      <u-form-item :label="$t('加盖次数')">
        <text>{{ form.userCount }}</text>
      </u-form-item>
      <u-form-item :label="$t('申请说明')">
        <text>{{ form.content || $t('暂无') }}</text>
      </u-form-item>
      <u-form-item :label="$t('文件详情')" label-position="top" style="position: relative">
        <u-button
          v-if="
            form.electronicApplication === true && form.signedList && form.signedList.length > 0
          "
          plain
          size="mini"
          style="position: absolute; right: 0; top: 30rpx"
          type="primary"
          @click="initPdfData"
        >
          {{ $t('预览') }}
        </u-button>
        <view class="file-Warp">
          <view class="file-Warp-item">
            <view v-for="(item, index) in form.imageList" :key="index" class="item-image-warp">
              <u-image
                :src="item.fileUrl"
                border-radius="10"
                class="item-image"
                height="150rpx"
                width="150rpx"
                @click="previewImage(index)"
              ></u-image>
              <u-image
                class="Original"
                height="35rpx"
                src="../../../static/image/icon/yuantu.png"
                width="50rpx"
                @click="previewImage(index, 'original')"
              ></u-image>
            </view>
          </view>
          <view
            v-for="(item, index) in form.fileList"
            :key="index"
            class="file-Warp-file"
            @click="downloadFile(item)"
          >
            <u-image
              :src="
                $lizhao.file.lzGetFileType(
                  item.name.slice(item.name.lastIndexOf('.') + 1, item.name.length)
                )
              "
              class="item-image"
              height="60rpx"
              width="60rpx"
            ></u-image>
            <view class="lz-ellipsis-1" style="max-width: 600rpx">{{ item.name }}</view>
          </view>
        </view>
      </u-form-item>
    </u-form>
    <!-- 审批流程 -->
    <time-axis :timeAxisData="timeAxisData" class="time-axis"></time-axis>
    <!-- 申请单状态 0:初始化提交 1:审批中 2:审批通过 3:审批拒绝  4:授权中 5:授权通过 6:授权拒绝 7:已推送  8:用章中 9:已用章 10:审计中 11:审计通过 12:审计拒绝 13:已失效 -->
    <!-- 0,1,2,4,5 ,7可以取消申请 -->
    <!-- 5,8,9 ,7可以推送结束 -->
    <!-- 8,9可以提交审计 -->
    <view
      v-if="
        OP.option &&
        OP.option.name === '审批处理' &&
        (form.status === 0 || form.status === 1) &&
        form.manager
      "
      class="footer"
    >
      <u-button size="medium" type="primary" @click="btnClick(0)">{{ $t('同意') }}</u-button>
      <u-button size="medium" type="warning" @click="btnClick(1)">{{ $t('驳回') }}</u-button>
      <u-button size="medium" type="success" @click="btnClick(2)">{{ $t('转交') }}</u-button>
    </view>
    <view v-if="OP.option && OP.option.name === '授权处理'" class="footer">
      <u-button v-if="form.status === 4" size="medium" type="primary" @click="btnClick(0)">
        {{ $t('授权') }}
      </u-button>
      <u-button v-if="form.status === 4" size="medium" type="warning" @click="btnClick(1)">
        {{ $t('驳回') }}
      </u-button>
      <u-button
        v-if="form.status === 8 || form.status === 9"
        size="medium"
        type="primary"
        @click="btnClick(3)"
      >
        {{ $t('提交审计') }}
      </u-button>
    </view>
    <view v-if="OP.option && OP.option.name === '我的申请'" class="footer">
      <!-- 兼容电子印章版本 -->
      <block v-if="form.electronic === true">
        <u-button v-if="form.showSign" size="medium" type="primary" @click="sing">
          {{ $t('立即签署') }}
        </u-button>
        <u-button v-if="form.showPush" size="medium" type="primary" @click="btnClick(4)">
          {{ $t('推送') }}
        </u-button>
        <block v-if="!form.ding">
          <u-button v-if="form.showClose" size="medium" type="error" @click="btnClick(5)">
            {{ $t('结束') }}
          </u-button>
        </block>
      </block>
      <!-- 兼容之前的老版本 -->
      <block v-else>
        <u-button
          v-if="form.status === 5 || form.status === 8 || form.status === 9 || form.status === 7"
          size="mini"
          type="primary"
          @click="btnClick(4)"
        >
          {{ $t('推送') }}
        </u-button>
        <u-button
          v-if="form.status === 5 || form.status === 8 || form.status === 9 || form.status === 7"
          size="mini"
          type="error"
          @click="btnClick(5)"
        >
          {{ $t('结束') }}
        </u-button>
        <u-button
          v-if="
            form.status === 4 ||
            form.status === 5 ||
            form.status === 8 ||
            form.status === 9 ||
            form.status === 7
          "
          size="mini"
          type="primary"
          @click="btnClick(7)"
        >
          {{ $t('授权码') }}
        </u-button>
      </block>
      <u-button
        v-if="
          form.status === 0 ||
          form.status === 1 ||
          form.status === 2 ||
          form.status === 4 ||
          form.status === 5
        "
        size="mini"
        type="warning"
        @click="btnClick(6)"
      >
        {{ $t('取消申请') }}
      </u-button>
      <u-button
        v-if="form.status === 8 || form.status === 9"
        size="mini"
        type="primary"
        @click="btnClick(3)"
      >
        {{ $t('提交审计') }}
      </u-button>
    </view>
    <u-modal
      ref="uModal"
      v-model="modal.show"
      :title="$t('建议')"
      async-close
      show-cancel-button
      @confirm="modalConfirm"
    >
      <view class="slot-content">
        <u-input
          v-model="modal.value"
          :placeholder="$t('建议')"
          border
          placeholder-style="color: red;"
          type="textarea"
        />
      </view>
    </u-modal>
    <u-modal
      ref="uModal"
      v-model="managerTransModal.visible"
      :title="$t('转交')"
      async-close
      show-cancel-button
      @confirm="managerTransModalConfirm"
    >
      <view class="slot-content">
        <u-input
          v-model="managerTransModal.value"
          :placeholder="$t('转交')"
          border
          placeholder-style="color: red;"
          type="textarea"
        />
      </view>
    </u-modal>
    <!-- 自选下一审批人 -->
    <u-picker
      v-model="picker.show"
      :default-selector="[0]"
      :range="picker.data"
      :title="$t('自选下一审批人')"
      mode="selector"
      range-key="name"
      safe-area-inset-bottom
      @confirm="pickerConfirm"
    ></u-picker>
    <!-- 推送或结束 -->
    <u-modal
      v-model="push.show"
      :show-confirm-button="false"
      :title="form.useCountVos && form.useCountVos[0].deviceName"
      :title-style="{ color: 'red' }"
      show-cancel-button
    >
      <view v-if="push.title === '推送'" class="slot-content-modal">
        <button
          v-if="form.ding"
          class="mini-btn"
          plain
          size="mini"
          type="primary"
          @tap="tuisongBlue()"
        >
          {{ $t('蓝牙推送') }}
        </button>
        <button v-else class="mini-btn" plain size="mini" type="primary" @tap="pushConfirm()">
          {{ $t('网络推送') }}
        </button>
      </view>
      <view v-else class="slot-content-modal">
        <button class="mini-btn" plain size="mini" type="primary" @tap="pushConfirm()">
          {{ $t('结束用印') }}
        </button>
      </view>
    </u-modal>
    <!-- 授权ca或短信 -->
    <u-modal
      ref="uAuth"
      v-model="auth.show"
      :title="$t('选择授权方式')"
      async-close
      show-cancel-button
      @confirm="authorization"
    >
      <view class="slot-content">
        <view style="padding-left: 40rpx">
          <u-radio-group v-model="auth.authorizeType">
            <u-radio name="ca">{{ $t('智能印章设备授权') }}</u-radio>
            <u-radio name="sms">{{ $t('印章管理员短信授权') }}</u-radio>
          </u-radio-group>
        </view>
      </view>
    </u-modal>
  </view>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapGetters(['userInfo', 'api'])
  },
  props: {},
  data() {
    return {
      OP: '', //传参
      form: {},
      timeAxisData: [], //审批流程
      modal: {
        num: '',
        show: false,
        value: ''
      },
      // 转交模态框
      managerTransModal: {
        visible: false,
        value: ''
      },
      picker: {
        //自选审批人
        show: false,
        value: {
          //已选择的值
          id: '',
          name: ''
        },
        data: []
      },
      push: {
        //推送或结束
        title: '',
        show: false,
        value: {
          //已选择的值
          id: '',
          deviceName: ''
        }
      },
      transferData: '', //已选转交人
      //授权ca或短信
      auth: {
        show: false,
        authorizeType: 'sms' // 授权签署方式 sms:经办人短信签署   ca:CA证书签署'
      }
    }
  },
  onLoad(op) {
    uni.setNavigationBarTitle({ title: this.$t('处理详情') })
    try {
      this.OP = JSON.parse(decodeURIComponent(op.data))
    } catch (e) {
      this.OP = JSON.parse(op.data)
    }
  },
  onShow() {
    //获取详情
    this.getProcessingDetails()
    //获取审批流程
    this.getByApplication()
  },
  methods: {
    initPdfData() {
      uni.navigateTo({
        url: '../../electronicSeal/pdfPreview/pdfPreview',
        events: {
          confirm(data) {
            //console.log(data);
          }
        },
        success(res) {
          res.eventChannel.emit('pagePramas', { applicationId: this.form.id, type: '申请单记录' })
        }
      })
    },
    //立即签署
    sing() {
      if (this.form.enterpriseApplicationId) {
        uni.navigateTo({
          url: '../../electronicSeal/contractSign/contractSign',
          events: {
            confirm(data) {
              //console.log(data);
            }
          },
          success(res) {
            res.eventChannel.emit('pagePramas', {
              enterpriseApplicationId: this.form.enterpriseApplicationId
            })
          }
        })
      } else {
        uni.showToast({
          title: 'enterpriseApplicationId undefined',
          icon: 'none'
        })
      }
    },
    //附件下载和浏览
    downloadFile(item) {
      // #ifdef H5
      window.open(item.fileUrl + '?Authorization=' + this.userInfo.token + '&us=app', '_blank')
      // #endif
      // #ifndef H5
      this.$lizhao.download.file(item.fileUrl + '?Authorization=' + this.userInfo.token + '&us=app')
      // #endif
    },
    //同意
    agreeOK() {
      let req = {
        applicationId: this.OP.clickItem.id, //用章申请单id
        suggest: this.modal.value, //建议信息
        optionalManagerUserId: this.picker.value.id //下一审批人
      }
      this.$u.get(this.api.GLOBAL_applicationManager_managerOK, req).then((res) => {
        this.$refs.uModal.clearLoading()
        if (res.code === 200) {
          this.goback(res)
        }
      })
    },
    //审批驳回
    rejectFail() {
      let req = {
        applicationId: this.OP.clickItem.id, //用章申请单id
        suggest: this.modal.value //建议信息
      }
      this.$u.get(this.api.GLOBAL_applicationManager_managerFail, req).then((res) => {
        this.$refs.uModal.clearLoading()
        if (res.code === 200) {
          this.goback(res)
        }
      })
    },
    //授权驳回
    KeeperFAIL() {
      let req = {
        applicationId: this.OP.clickItem.id, //用章申请单id
        suggest: this.modal.value //建议信息
      }
      this.$u.get(this.api.GLOBAL_applicationKeeper_KeeperFAIL, req).then((res) => {
        this.$refs.uModal.clearLoading()
        if (res.code === 200) {
          this.goback(res)
        }
      })
    },
    //转交
    managerTrans() {
      let req = {
        applicationId: this.OP.clickItem.id, //用章申请单id
        suggest: this.managerTransModal.value, //建议信息
        pushUserId: this.transferData.key //转交目标审批人id
      }
      console.log('转交.req', req)
      this.$u.post(this.api.GLOBAL_applicationManager_managerTrans, req).then((res) => {
        console.log('GLOBAL_applicationManager_managerTrans.res', res)
        if (res.code === 200) {
          this.goback(res)
        }
      })
    },
    //返回
    goback(res) {
      uni.navigateBack({
        delta: 1
      })
      setTimeout(() => {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
      }, 800)
      //刷新上一列表
      uni.$emit('applicationDetailsToApplicationList', true)
    },
    //点击底部按钮
    btnClick(num) {
      this.modal.num = num
      this.modal.value = ''
      if (this.OP.option.name === '审批处理') {
        if (this.modal.num === 0) {
          //同意
          //处理时先判断是否是自选模式（如果自选模式先选择审批人）
          this.getNextOptionalNode()
          return
        } else if (this.modal.num === 2) {
          //转交
          uni.navigateTo({
            url: `../userList/userList?type=转交人&deviceId=${this.form.devices[0].deviceId}`,
            events: {
              selectUser: (User) => {
                this.transferData = User[0]
                setTimeout(() => {
                  this.managerTransModal.visible = true
                }, 100)
              }
            }
          })
          return
        }
      }
      if (this.modal.num === 3) {
        //提交审计
        uni.showModal({
          title: this.$t('提示'),
          content: `【${this.form.title}】${this.$t('该操作将会使申请单提前进入审计处理')}`,
          cancelText: this.$t('取消'),
          confirmText: this.$t('确定'),
          success: (res) => {
            if (res.confirm) {
              //提交审计
              this.exitApplication()
            } else if (res.cancel) {
            }
          }
        })
        return
      }
      if (this.modal.num === 4) {
        //推送
        this.push.title = '推送'
        this.push.show = true
        return
      }
      if (this.modal.num === 5) {
        //结束
        this.push.title = '结束'
        this.push.show = true
        return
      }
      if (this.modal.num === 6) {
        //取消申请
        uni.showModal({
          title: this.$t('提示'),
          content: this.$t('是否取消申请') + '?',
          success: (res) => {
            if (res.confirm) {
              //取消申请
              this.cancelApplication()
            }
          }
        })
        return
      }
      if (this.modal.num === 7) {
        //授权码
        this.$u
          .get(this.api.GLOBAL_application_application_authorizationCode + '/' + this.form.id, {})
          .then((res) => {
            if (res.code === 200) {
              uni.showModal({
                title: this.$t('授权码'),
                content: res.data,
                showCancel: true,
                cancelText: this.$t('取消'),
                confirmText: this.$t('复制'),
                success: (tt) => {
                  if (tt.confirm) {
                    uni.setClipboardData({
                      data: res.data,
                      success: () => {
                        uni.showToast({
                          title: this.$t('已复制')
                        })
                      }
                    })
                  }
                }
              })
            }
          })
        return
      }
      if (this.OP.option.name === '授权处理' && this.modal.num === 0) {
        //授权
        //如果是电子章，并且有ca证书，需要授权人选择以 ca证书方式验证 还是 用短信方式验证
        if (this.form.signCa === true) {
          this.auth.show = true
          return
        }
      }

      this.modal.show = true
    },
    authConfirm() {
      this.modal.show = true
      this.authorization()
    },
    //取消申请
    cancelApplication() {
      this.$u
        .post(this.api.GLOBAL_application_application_cancelApplication, {
          applicationId: this.OP.clickItem.id
        })
        .then((res) => {
          if (res.code === 200) {
            this.goback(res)
          }
        })
    },
    //提交审计
    exitApplication() {
      let req = {
        applicationId: this.OP.clickItem.id //用章申请单id
      }
      this.$u.post(this.api.GLOBAL_application_application_exitApplication, req).then((res) => {
        this.$refs.uModal.clearLoading()
        if (res.code === 200) {
          this.goback(res)
        }
      })
    },
    managerTransModalConfirm() {
      console.log('managerTransModalConfirm')
      console.log('managerTransModal', this.managerTransModal)
      this.managerTransConfirm()
    },
    //转交再次确认
    managerTransConfirm() {
      uni.showModal({
        title: this.$t('提示'),
        content: this.$t('是否转交给') + this.transferData.label,
        success: (res) => {
          if (res.confirm) {
            this.managerTrans()
          } else if (res.cancel) {
          }
        }
      })
    },
    //授权
    authorization() {
      let req = {
        applicationId: this.OP.clickItem.id, //用章申请单id
        suggest: this.modal.value, //建议信息
        authorizeType: this.auth.authorizeType //授权签署方式 sms:经办人短信签署   ca:CA证书签署
      }
      this.$u.post(this.api.GLOBAL_applicationKeeper_keeperOK, req).then((res) => {
        this.$refs.uModal.clearLoading()
        if (res.code === 200) {
          this.goback(res)
        }
      })
    },
    //弹出层确定
    modalConfirm() {
      //console.log(this.modal.num);
      if (this.OP.option.name === '审批处理') {
        if (this.modal.num === 0) {
          //同意
          this.agreeOK()
        } else if (this.modal.num === 1) {
          //驳回
          this.rejectFail()
        }
      } else if (this.OP.option.name === '授权处理') {
        if (this.modal.num === 0) {
          //授权
          this.authorization()
        } else if (this.modal.num === 1) {
          //驳回
          this.KeeperFAIL()
        }
      }
    },
    //自选审批人
    pickerConfirm(item) {
      this.picker.value = this.picker.data[item]
      this.modal.show = true
    },
    //推送、结束
    pushConfirm() {
      this.push.value = this.form.useCountVos[0]
      let req = {
        applicationId: this.OP.clickItem.id,
        signetId: this.push.value.id
      }
      let url =
        this.push.title === '推送'
          ? this.api.GLOBAL_applicationKeeper_pushApplicationToSignet
          : this.api.GLOBAL_applicationKeeper_endApplicationToSignet
      this.$u.get(url, req).then((res) => {
        if (res.code === 200) {
          uni.showToast({
            title: res.msg,
            icon: 'none',
            duration: 2000
          })
        }
      })
    },

    //蓝牙推送
    tuisongBlue() {
      //先判断是否锁定
      this.$u
        .post(this.api.GLOBAL_device_dingSignet_idUse, { sn: this.form.useCountVos[0].sn })
        .then((res) => {
          if (res.code === 200) {
            this.push.show = false
            let data = `https://pages.dingtalk.com/wow/dingtalk/act/smartdevice?service=442&conn=qr&sign=3679b9&sn=${this.form.useCountVos[0].sn}`
            let parms = {
              total: this.form.useCountVos[0].totalCount, //可盖次数
              count: this.form.useCountVos[0].useCount, //已盖次数
              bizId: this.form.id, //申请单id
              userId: this.form.userId //用章人
            }
            uni.navigateTo({
              url:
                '../../tabBar/bluetooth?data=' +
                encodeURIComponent(data) +
                '&from=蓝牙推送' +
                '&parms=' +
                encodeURIComponent(JSON.stringify(parms)) +
                '&deviceId=' +
                this.form.devices[0].deviceId +
                '&orgId=' +
                this.form.orgId
            })
          }
        })
    },
    //处理时先判断是否是自选模式（如果自选模式先选择审批人）
    getNextOptionalNode() {
      let req = {
        applicationId: this.OP.clickItem.id
      }
      this.$u
        .get(this.api.GLOBAL_application_applicationNode_getNextOptionalNode, req)
        .then((res) => {
          if (res.code === 200) {
            if (res.data) {
              this.picker.show = true
              this.picker.data = res.data
            } else {
              this.modal.show = true
            }
          }
        })
    },
    //浏览图片
    async previewImage(index, type) {
      console.log('previewImage')
      if (type === 'original') {
        uni.$lizhao.debounce(() => {
          uni.showLoading({
            title: this.$t('加载中') + '...',
            mask: false
          })
          setTimeout(async () => {
            uni.hideLoading()
            let originalList = JSON.parse(JSON.stringify(this.form.imageList))
            //解决1.0查看原图兼容问题，2.0后此代码可以删除
            await this.$lizhao.seeBigImage.getOriginal(originalList)
            this.lzpreviewImage(index, originalList)
          }, 800)
        })
        return
      }
      this.lzpreviewImage(index, this.form.imageList)
    },
    lzpreviewImage(index, list) {
      console.log('lzpreviewImage')
      let arr = list.map((item) => item.fileUrl)
      let width = uni.getWindowInfo().screenWidth * 1
      arr = arr.map((item) => {
        let strIndex = item.indexOf('?')
        item = item.slice(0, strIndex) + `?Authorization=${this.userInfo.token}&us=app&width=` + width
        return item
      })
      console.log('arr', arr)
      // 预览图片
      uni.previewImage({
        urls: arr,
        current: index,
        longPressActions: {
          itemList: ['保存原图'],
          success: (data) => {
            if (data.tapIndex === 0) {
              this.$lizhao.download.save(list[data.index], 'fileUrl', this.userInfo.token)
            }
          },
          fail: (err) => {
            //console.log(err.errMsg);
          }
        },
        success: () => {
          setTimeout(() => {
            uni.showToast({
              title: '长按保存原图',
              icon: 'none'
            })
          }, 1000)
        }
      })
    },
    //获取审批流程
    getByApplication() {
      this.$u
        .get(this.api.GLOBAL_applicationDealLog_getByApplication, {
          applicationId: this.OP.clickItem.id
        })
        .then((res) => {
          if (res.code === 200 && res.data) {
            let arr = res.data.map((item, index) => {
              item.boxshow = false
              item.isShowInfo = false
              return item
            })
            this.timeAxisData = arr
          }
        })
    },
    //获取详情
    getProcessingDetails() {
      let url = ''
      if (this.OP.option.name === '审批处理') {
        url = this.api.GLOBAL_application_getManagerApplicationById
      } else if (this.OP.option.name === '授权处理') {
        url = this.api.GLOBAL_application_getKeeperApplicationById
      } else if (this.OP.option.name === '审计处理') {
        url = this.api.GLOBAL_application_getAuditorApplicationById
      } else if (this.OP.option.name === '我的申请' || this.OP.option.name === '申请单详情') {
        // 兼容老版本接口
        url = this.api.GLOBAL_application_getByMyApplication
        // 电子印章接口
        // url = this.api.GLOBAL_app_application_findApplicationDetails
      }
      //章的接口
      this.$u
        .get(url, {
          applicationId: this.OP.clickItem.id
        })
        .then((res) => {
          if (res.code === 200) {
            this.form = res.data
            //区分图片和附件
            let imageList = [],
              fileList = []
            this.form.fileEntities.map((item) => {
              if (item.type === 0) {
                item.fileUrl =
                  item.fileUrl + '?Authorization=' + this.userInfo.token + '&us=app&width=80'
                imageList.push(item)
              } else {
                fileList.push(item)
              }
            })
            this.form.imageList = imageList
            this.form.fileList = fileList
          }
        })
    },
    showToast(item) {
      uni.showToast({
        title: `${this.$t('已盖')}:${item.useCount},${this.$t('剩余')}:${item.totalCount - item.useCount}`,
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.applicationDetails {
  background-color: #fff;
  width: 100%;
  padding: 0 30rpx;
  box-sizing: border-box;
  padding-bottom: 100rpx;

  .form-item {
    position: relative;
    width: fit-content;
  }

  .time-axis {
    padding-bottom: 100rpx;
    margin-top: 30rpx;
  }

  .slot-content {
    padding: 20rpx;
  }

  .slot-content-modal {
    padding: 20rpx;
    display: flex;
    justify-content: space-around;
  }

  .file-Warp {
    .file-Warp-item {
      display: flex;
      flex-wrap: wrap;

      .item-image-warp {
        position: relative;
        width: 150rpx;
        height: 150rpx;
        margin-right: 10rpx;
        margin-bottom: 10rpx;

        .item-image {
        }

        .Original {
          position: absolute;
          right: 6rpx;
          bottom: 14rpx;
        }
      }
    }

    .file-Warp-file {
      display: flex;
      align-items: center;
      overflow: hidden;
      color: #888;

      .item-image {
        margin-right: 20rpx;
      }
    }
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background-color: #fff;
    padding: 20rpx 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    /* #ifdef MP-WEIXIN */
    justify-content: space-around;
    /* #endif */
  }
}
</style>
